<template>
  <div
    class="flex space-y-1 border-2 flex-col w-full p-1 mb-2 text-sm shadow rounded"
    :class="getOrderColor(item.orderStatus)"
  >
    <div class="flex items-center justify-between text-sm">
      <div class="flex items-center gap-x-2">
        订单号：<span class="text-sm">{{ item.orderNo }}</span>
        <CopyBtn :text="item.orderNo" :size="{ width: '15px', height: '15px' }" />
      </div>
      <div>状态：{{ getOrderStatus(item.orderStatus) }}</div>
    </div>
    <div class="flex items-center gap-x-4">
      <div>
        收款金额：<span class="text-red-500">{{ item.amount }}</span>
      </div>
      <div>
        付款人姓名：<span class="text-red-500">{{ item.input }}</span>
      </div>
    </div>
    <div class="space-y-2">
      <div class="my-1">
        收款通道：<span class="w-12 h-12 p-1">
          <img :src="item.icoImg" alt="icon" class="w-3 h-3 inline-block" />
          {{ item.codeTitle }}</span
        >
      </div>
      <div v-if="item.codeTitle.search('数字人民币') != -1">钱包编码：{{ item.code }}</div>
    </div>
    <div class="flex items-center gap-x-2">
      <div
        v-if="item.collectionInput.length > 0"
        :key="input.id"
        v-for="input in item.collectionInput"
      >
        {{ input.title }}: {{ input.value }}
      </div>
      <div v-else :key="'info' + input.id" v-for="input in item.paymentInfo">
        {{ input.title }}: {{ input.value }}
      </div>
      <div>
        返佣：<span class="text-red-500">{{ item.agentGain }}</span>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <div>创建时间：{{ dayjs(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { getOrderStatus } from '@/utils/order'
import CopyBtn from '@/components/CopyBtn.vue'

defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})

function getOrderColor(status: number) {
  switch (status) {
    case 0:
      return 'border-yellow-500'
    case 1:
      return 'border-red-500'
    case 2:
      return 'border-blue-600'
    case 3:
      return 'border-gray-900'
    case 6:
      return 'border border-green-300 bg-white'
    case 7:
      return 'border border-blue-300 bg-white'
    case 8:
      return 'border border-orange-300 bg-white'
    default:
      return 'border bg-white'
  }
}
</script>
